<template>
    <div>
        <div class="title">
            <div class="back" @click="$router.back()">
                <span @click="change"> <img src="../assets/img/fanhui.png" alt=""> </span>
            </div>
            <div class="gamename">购物车</div>
            <div class="more" v-show="!del" @click="edit">编辑</div>
            <div class="more" v-show="del" @click="edit">完成</div>
        </div>
        <div class="carlist">
            <div class="item active">游戏</div>
            <div class="item">周边</div>
            <div class="item">虚拟物品</div>
        </div>
        <div class="selectAll" v-show="list.length > 0">
            <div class="left"><input type="checkbox" v-model="checked"> <span>全选 ({{ list.length }})</span></div>
            <div class="right" v-show="listShow" @click="showList">展开 <span class="iconfont icon-xiangxiajiantou"></span>
            </div>
            <div class="right" v-show="!listShow" @click="showList">收起 <span class="iconfont icon-xiangshangjiantou"></span>
            </div>
        </div>
        <div v-show="list.length == 0" class="caritem" style="justify-content: center; ">
            <p style="color: #e85323;">购物车空空的,快去商城购买吧</p>
        </div>
        <div v-show="!listShow" class="caritem" v-for="(item, index) in list" :key="index">
            <div class="left"><input type="checkbox" v-model="item.check" @change="checkbutton"></div>
            <div class="right">
                <img :src="item.img" alt="">
                <div class="content">
                    <p>{{ item.name }}</p>
                    <p>￥{{ item.price }}</p>
                </div>
            </div>
        </div>
        <div style="height: 95px;"></div>
        <van-submit-bar v-show="!del" :disabled="list.length
            == 0 || !buttonState" :price="money" button-text="去结算" @submit="onSubmit" :label="'总计：'">
            <input type="checkbox" v-model="checked">全选
        </van-submit-bar>
        <van-submit-bar :disabled="list.length
            == 0 || !buttonState" v-show="del" button-text="删除" @submit="delItem" class="delbutton">
            <div> <input type="checkbox" v-model="checked">全选</div>

        </van-submit-bar>
        <fotter-bar></fotter-bar>
    </div>
</template>

<style lang="scss" scoped>
.delbutton {
    .van-submit-bar__bar {
        justify-content: space-between;
    }
}

.van-submit-bar {
    bottom: 55px;
}

.van-button--round {
    border-radius: 0;
}

.van-submit-bar__bar {
    padding: 0px 0px 0px 20px;
}

.van-submit-bar__text {
    text-align: left;
    margin-left: 30px;

    span {
        font-size: 13px;
    }
}

.caritem {
    padding: 20px 5px 10px 15px;
    display: flex;
    align-items: center;

    .right {
        display: flex;

        img {
            width: 150px;
            height: 89px;
        }

        .content {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            p {
                &:nth-child(1) {
                    font-size: 15px;
                }

                &:nth-child(2) {
                    color: #ff855f;
                }
            }
        }
    }

    input {
        width: 15px;
        margin-right: 10px;
        height: 15px;
    }
}

.selectAll {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 5px 10px 15px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;

    .right {
        font-size: 12px;

        span {
            font-size: 12px;
        }
    }

    .left {
        display: flex;

        input {
            width: 15px;
            margin-right: 10px;
        }

        span {
            font-weight: bold;
            font-size: 15px;
        }

    }
}

.carlist {

    display: flex;
    box-sizing: border-box;
    padding: 0px 30px;
    justify-content: space-between;
    background-color: #333333;

    .item {
        margin-top: 5px;
        padding: 0px 15px 10px;
        color: #aeaeae;
        font-size: 15px;

        &.active {
            color: #e85323;
            border-bottom: 2px solid #e85323;
        }
    }
}

.title {

    // position: fixed;
    position: relative;
    z-index: 2;
    display: flex;
    background-color: #333333;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    color: #cccccc;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 2;
    top: 0;
    border-bottom: 2px solid #686868;

    .back {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;

            img {
                width: 16px;
                height: 16px;
            }
        }
    }

    .gamename {
        flex: 1;
        text-align: center;
        font-size: 17px;
    }

    .more {
        span {
            font-size: 17px;
        }
    }



}
</style>
<script>
import { Toast } from 'vant'
import { getTopGame } from '../api/homeView'
import fotterBar from '../components/fotterBar.vue'
export default {
    data() {
        return {
            // checked: true,
            list: [],//当前购物车列表
            allItem: null,//所有的游戏列表，用作选软购物车列表的数据
            listShow: false,//购物车列表展开和收回
            del: false,//删除，或结算按钮的更换显示
            buttonState: false,//控制按钮的是否可点击状态
            order: [],//
            orderList: [],//
        }
    },
    //接受购物车列表
    props: ['carList'],
    methods: {
        checkbutton() {
            // 通过购物车列表不为空的时候，还有是否有选项被选中，来返回res
            // 然后，通过res来控制buttonState，然后改变按钮的disable状态
            if (this.list != null) {
                let res = this.list.some(function (item) {
                    return item.check
                })
                this.buttonState = res
            }
        },
        change() {
            this.$store.commit('change', true)
        }, edit() {
            //是否修改
            this.del = !this.del
        },
        onSubmit() {
            //提交按钮
            //订单名字列表，加入选中的选项
            this.order = this.list.filter(item => {
                return item.check == true
            })

            for (var i in this.order) {
                if (this.orderList.indexOf(this.order[i].name) == -1) {
                    this.orderList.push(this.order[i].name)
                }
            }
            //路由跳转，并把选中的列表提交
            this.$router.push({ path: './order', query: this.orderList })


        }, delItem() {
            //调用app组件的方法，删除购物车
            this.$emit('delCarItem', this.list)
            this.list = this.list.filter(item => {
                return item.check != true
                // 当前的购物车列表也需要删除(这边的渲染根据this.list来渲染的)，不然得写watch，监听carList列表
            })
            Toast('删除成功')
        },
        showList() {
            this.listShow = !this.listShow
        },
        getTopGame() {
            getTopGame().then(data => {
                this.allItem = data
                for (var i = 0; i < this.carList.length; i++) {
                    for (let j in this.allItem) {
                        if (this.allItem[j].name == this.carList[i]) {
                            this.list.push(this.allItem[j])
                        }
                    }
                }
            })
        }

    }, components: {
        fotterBar
    }, created() {
        this.getTopGame()

    },
    computed: {
        // 计算总价
        money: function () {
            return this.list.reduce((total, item) => {
                if (item.check) {
                    return total += item.price * 100
                } else {
                    return total
                }
            }, 0)
        },
        checked: {
            //全选功能
            get() {
                if (this.list.length == 0) {
                    return false
                } else {
                    return this.list.every(item => {
                        return item.check
                    })
                }

            }, set(value) {
                this.list.forEach(item => { item.check = value })
                this.buttonState = value
            }
        }
    }
}
</script>